<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>JoyDialog</title>
    <link rel="stylesheet" href="../src/css/dialog.css">
    <link rel="stylesheet" href="../src/css/style.css">
    <script src="../dist/JoyDialog.js"></script>
    <link rel="stylesheet" href="../dist/JoyDialog.css" />
    <script src="lib/highlight.js"></script>
    <script src="lib/zepto.min.js"></script>
    <script src="lib/marked.min.js"></script>


</head>

<body>
    <div class="page">
        <div class="wrapper clearfix">
            <div class="sidebar">
                <!-- S content-block  -->
                <div class="content-block">
                    <div class="subtitle">JoyDialog 快速导航</div>
                    <p><a target="_self" href="#instructions">使用说明</a></p>
                    <p>
                        <a target="_self" href="#examples">示例</a><br />
                        <ul class="history-version">
                            <li><a target="_self" href="#basicDemo">基本用法</a></li>
                            <li><a target="_self" href="#seniorDemo">高级用法</a></li>
                            <li><a target="_self" href="#toastDemo">Toast</a></li>
                            <li><a target="_self" href="#noticeDemo">Notice</a></li>
                            <li><a target="_self" href="#funcDemo">方法调用</a></li>
                        </ul>
                    </p>
                </div>
                <!-- E content-block  -->

              
            </div>
            <div class="main">
                <div class="content-block" id="instructions">
                    <!-- <div class="subtitle">使用说明</div> -->
                    <div class="panel">
                        <div class="panel-hd">使用说明</div>
                        <div class="panel-bd">

                        </div>
                    </div>
                </div>
                <div class="content-block" id="examples">
                    <!-- <div class="subtitle">使用与示例</div> -->
                    <div class="panel">
                        <div class="panel-hd">示例</div>
                        <div class="panel-bd" >
                            <div class="example-item" id="basicDemo">
                                <h3 class="example-name">默认</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    content: '我是默认的弹窗。这里是提示信息内容'   
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            
                            <div class="example-item">
                                <h3 class="example-name">自定义标题</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '我是自定义标题',
    content: '自定义标题的弹窗。这里是弹窗的提示信息内容', 
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            
                            <div class="example-item">
                                <h3 class="example-name">无标题</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleShow: false,
    content: '无标题的弹窗。这里是弹窗的提示信息内容', 
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">自动关闭</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    autoClose: 2500,
    content: '自动关闭的弹窗。这里是弹窗的提示信息内容',
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">点遮罩层关闭</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    overlayClose: true,
    content: '无标题的弹窗。这里是弹窗的提示信息内容', 
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">自定义按钮文字</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonTextConfirm: '现在升级',
    buttonTextCancel: '下次再说',
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            

                            <div class="example-item">
                                <h3 class="example-name">自定义按钮class</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    content: '这里是弹窗的提示信息内容',
    buttonClassConfirm: 'custom-confirm',
    buttonClassCancel: 'custom-cancel',
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮回调函数</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    closeBtnShow: true,
    content: '这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮'); 
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">状态回调函数</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    content: '这里是弹窗的提示信息内容',
    onBeforeShow: function() {
        alert('弹窗显示前执行~~');
    },
    onShow: function() {
        alert('弹窗显示后执行~~');
    },
    onBeforeClosed: function() {
        alert('弹窗关闭前执行~~');
    },
    onClosed: function() {
        alert('弹窗关闭后执行~~');
    }
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" id="seniorDemo">
                                <h3 class="example-name">弹窗风格-默认(按设备自动样式)</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
var div=$('&lt;div&gt;按访问设备显示的弹窗风格，这里是弹窗的提示信息内容&lt;/div&gt;')
var dia = JoyDialog({
    style: 'default',  //  default、pc、mobile
    titleText: '弹窗风格',
    content: div,
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮');
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});
setTimeout(function(){
    div.html("按访问设备显示&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;")
},2000);
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">弹窗风格-pc(指定样式)</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    style: 'pc',  //  default、pc、mobile
    titleText: '弹窗风格',
    content: '按访问设备显示的弹窗风格，这里是弹窗的提示信息内容',
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            <div class="example-item">
                                <h3 class="example-name">弹窗风格-mobile(指定样式)</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    style: 'mobile',  // default、pc、mobile
    titleText: '弹窗风格',
    content: '按访问设备显示的弹窗风格，这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮');
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            <div class="example-item">
                                <h3 class="example-name">自定义多个按钮</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttons: [          
        {
            name: '不再提醒',
            callback: function() {
                alert('你选择了“不再提醒”');
            }
        },
        {
            name: '下次再说',
            callback: function() {
                alert('你选择了“下次再说”');
            }
        },
        {
            name: '现在升级',
            class: 'dialog-btn-hl',
            callback: function() {
                alert('你选择了“现在升级”');
            }
        }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-default、并排</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'default',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'side',  
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-default、堆叠</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'default',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'stacked',  // side: 并排; stacked: 堆叠
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-mobile、并排</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'mobile',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'side',  // side: 并排; stacked: 堆叠
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-mobile、堆叠</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'mobile',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'stacked',  // side: 并排; stacked: 堆叠
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-pc、并排</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'pc',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'side',  // side: 并排; stacked: 堆叠
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">按钮排版样式-pc、堆叠</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    titleText: '发现新版本',
    style: 'pc',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'stacked',  // side: 并排; stacked: 堆叠
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item" id="toastDemo">
                                <h3 class="example-name">Toast 类型-自定义图标</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast',
    infoIcon: 'image/loading.gif',
    infoText: '正在加载中',
    autoClose: 2500
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型-无图标</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast',
    infoText: '正在加载中',
    autoClose: 2500
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - loading</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
var jdia=JoyDialog({
    type : 'loading',
    infoText: '正在加载'
});
setTimeout(function(){
    jdia.close();
},3*1000)//
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - success</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_success',
    infoText: '执行成功'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - warning</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_warning',
    infoText: '这是警告'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - info</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_info',
    infoText: '执行完成'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - error</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_error',
    infoText: '执行失败'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - wind</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_wind',
    infoText: '遇到风险'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - question</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_question',
    infoText: '这是个问题'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item">
                                <h3 class="example-name">Toast 类型 - busy</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'toast_busy',
    infoText: '服务器忙'
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item" id="noticeDemo">
                                <h3 class="example-name">Notice  类型 - 图标加文字</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice',
    infoIcon: 'image/loading.gif',
    infoText: '正在加载中',
    autoClose: 2500
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - 纯文字、顶部显示</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice',
    infoText: '正在加载中',
    autoClose: 2500,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - info</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice_info',
    infoText: '这是一个通知',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - success</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice_success',
    infoText: '执行成功',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - warning</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice_warning',
    infoText: '这是一个警告',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - error</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice_error',
    infoText: '执行失败',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="example-item" >
                                <h3 class="example-name">Notice  类型 - 弹出多个</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
JoyDialog({
    type : 'notice_error',
    infoText: '执行失败',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
JoyDialog({
    type : 'notice_warning',
    infoText: '这是一个警告',
    autoClose:4000,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
JoyDialog({
    type : 'notice_success',
    infoText: '执行成功',
    autoClose:6000,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item" id="funcDemo">
                                <h3 class="example-name">方法调用</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
var jdia = JoyDialog({
    closeBtnShow: true,
    content: '这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        jdia.update({content:'这里是弹窗修改后的提示信息内容'});
        return false;//返回false 阻止弹出层点击确认按钮时自动关闭
    },
    onClickCancelBtn : function(){
        jdia.close();//手动关闭
        return false;//返回false 阻止弹出层点击取消按钮时自动关闭
    }
});
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>

                            <div class="example-item" id="lodingDemo">
                                <h3 class="example-name">全局loading</h3>
                                <div class="example-show">
                                    <button  class="button button1" type="button">显示弹窗</button>
                                </div>
                                <div class="example-code">
                                    <div class="hl-section">
                                        <pre>
                                            <code class="javascript">
//全局唯一loading,多次调用不重叠
JoyDialog.showLoading("正在加载");
//关闭loading
setTimeout(function(){
    JoyDialog.showLoading("正在加载1");
},1000)
//关闭loading
setTimeout(function(){
    JoyDialog.hideLoading();
    JoyDialog.hideLoading();
},50000)
                                            </code>
                                        </pre>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function(){
            hljs.initHighlightingOnLoad();
            $.get('../README.md', function(response, status, xhr){
                $("#instructions .panel-bd").html(marked(response));
                $('#instructions table').attr('border',1).attr("cellspacing",0).css("border-collapse","collapse")
            });
            $('.button1').each(function(i,btn){
                $(btn).click(function(){
                    var code = $(btn).parents('.example-item').find('.example-code code').text();
                    eval(code);
                })
            })
            
        })()
        
    </script>
</body>

</html>